        // Function to send data via AJAX
        function sendData(buttonId) {
            $.ajax({
                url: '/send_data',
                method: 'POST',
                data: JSON.stringify({ buttonId: buttonId }),
                contentType: 'application/json',
                success: function(response) {
                    console.log('Data sent successfully:', response);
                },
                error: function(xhr, status, error) {
                    console.error('Error sending data:', error);
                }
            });
        }

        function displayCrossChair() {
            // 获取开关状态
            const isChecked = document.getElementById('slider-cross-chair').checked;

            // 创建 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/update-cross-chair-slider-status', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            // 发送数据
            xhr.send(JSON.stringify({ sliderStatus: isChecked }));

            // 处理响应（可选）
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log('数据已成功发送:', xhr.responseText);
                } else {
                    console.error('请求失败:', xhr.statusText);
                }
            };
        }


        function displayCode() {
            // 获取开关状态
            const isChecked = document.getElementById('slider-code').checked;

            // 创建 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/update-code-slider-status', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            // 发送数据
            xhr.send(JSON.stringify({ sliderStatus: isChecked }));

            // 处理响应（可选）
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log('数据已成功发送:', xhr.responseText);
                } else {
                    console.error('请求失败:', xhr.statusText);
                }
            };
        }

        function displayPort() {
            // 获取开关状态
            const isChecked = document.getElementById('slider-port').checked;

            // 创建 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/update-port-slider-status', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            // 发送数据
            xhr.send(JSON.stringify({ sliderStatus: isChecked }));

            // 处理响应（可选）
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log('数据已成功发送:', xhr.responseText);
                } else {
                    console.error('请求失败:', xhr.statusText);
                }
            };
        }


        function workMode() {
            // 获取开关状态
            const isChecked = document.getElementById('slider-work-mode').checked;

            // 创建 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/update-work-mode-status', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            // 发送数据
            xhr.send(JSON.stringify({ sliderStatus: isChecked }));

            // 处理响应（可选）
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log('数据已成功发送:', xhr.responseText);
                } else {
                    console.error('请求失败:', xhr.statusText);
                }
            };
        }


        function expMode() {
            // 获取开关状态
            const isChecked = document.getElementById('slider-exp-mode').checked;

            // 创建 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/update-exp-mode-status', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            // 发送数据
            xhr.send(JSON.stringify({ sliderStatus: isChecked }));

            // 处理响应（可选）
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log('数据已成功发送:', xhr.responseText);
                } else {
                    console.error('请求失败:', xhr.statusText);
                }
            };
        }
        function updateCrossChair() {
            // 获取所有文本框的值
            const number1 = parseFloat(document.getElementById('float-input-cross-chair-x').value) || 0;
            const number2 = parseFloat(document.getElementById('float-input-cross-chair-y').value) || 0;

            // 创建数据对象
            const data = {
                number1: number1,
                number2: number2
            };

            // 创建 POST 请求
            fetch('/send-numbers', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                console.log('成功:', data);
                //alert('数据已成功发送');
            })
            .catch((error) => {
                console.error('错误:', error);
                //alert('发送数据失败');
            });
        }

        function updateClick(){
            // 获取所有文本框的值
            const number1 = parseFloat(document.getElementById('float-input-click-x').value) || 0;
            const number2 = parseFloat(document.getElementById('float-input-click-y').value) || 0;

            // 创建数据对象
            const data = {
                number1: number1,
                number2: number2
            };

            // 创建 POST 请求
            fetch('/send-click-numbers', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                console.log('成功:', data);
                //alert('数据已成功发送');
            })
            .catch((error) => {
                console.error('错误:', error);
                //alert('发送数据失败');
            });
        }
        function updateRect()
        {
            // 获取所有文本框的值
            const number1 = parseFloat(document.getElementById('float-input-rect-x').value) || 0;
            const number2 = parseFloat(document.getElementById('float-input-rect-y').value) || 0;
            const number3 = parseFloat(document.getElementById('float-input-rect-width').value) || 0;
            const number4 = parseFloat(document.getElementById('float-input-rect-height').value) || 0;
            // 创建数据对象
            const data = {
                number1: number1,
                number2: number2,
                number3: number3,
                number4: number4
            };

            // 创建 POST 请求
            fetch('/send-rect-numbers', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                console.log('成功:', data);
                //alert('数据已成功发送');
            })
            .catch((error) => {
                console.error('错误:', error);
                //alert('发送数据失败');
            });
        }
        function updateExp() {
            // 获取所有文本框的值
            const number1 = parseFloat(document.getElementById('float-input-exp').value) || 0;

            // 创建数据对象
            const data = {
                number1: number1
            };

            // 创建 POST 请求
            fetch('/send-exp-numbers', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                console.log('成功:', data);
                //alert('数据已成功发送');
            })
            .catch((error) => {
                console.error('错误:', error);
                //alert('发送数据失败');
            });
        }

        function updateGain() {
            // 获取所有文本框的值
            const number1 = parseFloat(document.getElementById('float-input-gain').value) || 0;
            // 创建数据对象
            const data = {
                number1: number1
            };

            // 创建 POST 请求
            fetch('/send-gain-numbers', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                console.log('成功:', data);
                //alert('数据已成功发送');
            })
            .catch((error) => {
                console.error('错误:', error);
                //alert('发送数据失败');
            });
        }

        // Function to update the output textarea with new messages
        function updateOutput(message) {
            var output = document.getElementById('output');
            output.value += message + '\n';
        }

        // Function to start listening for server-sent events
        function startListening() {
            var eventSource = new EventSource('/listen');
            eventSource.onmessage = function(event) {
                updateOutput(event.data);
            };
            eventSource.onerror = function(event) {
                console.error('Error with EventSource:', event);
            };
        }

        const canvas = document.getElementById('videoCanvas');
        const video = document.getElementById('video');
        const ctx = canvas.getContext('2d');
        let startX, startY, isDrawing = false;

        // Set canvas size to match video size
        video.addEventListener('loadeddata', () => {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
        });

        // Draw video frame on canvas
        video.addEventListener('play', () => {
            const drawFrame = () => {
                if (video.paused || video.ended) return;
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                requestAnimationFrame(drawFrame);
            };
            drawFrame();
        });

        // Mouse event handlers for drawing rectangles
        canvas.addEventListener('mousedown', (e) => {
            startX = e.offsetX;
            startY = e.offsetY;
            isDrawing = true;
        });

        canvas.addEventListener('mousemove', (e) => {
            if (!isDrawing) return;
            const x = e.offsetX;
            const y = e.offsetY;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 2;
            ctx.strokeRect(startX, startY, x - startX, y - startY);
        });

        canvas.addEventListener('mouseup', () => {
            isDrawing = false;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });

        // Play video on load
        video.addEventListener('canplay', () => {
            video.play();
        });
